<template>
    <div class="entrance">
        <n-carousel effect="card" :show-dots="false" draggable
                    prev-slide-style="transform: translateX(-100%) scaleY(0.5) rotateY(90deg);"
                    next-slide-style="transform: scaleY(0.5) rotateY(-90deg);">
            <n-carousel-item :style="{ width: '80%' }">
                <div class="side-card glass">
                    <router-link to="special" @click="app.specialFlag = 1">
                        <div class="but open-ent">
                            <div class="prompt">点击进入约会专栏</div>
                            <div class="theme">《约会》 - 爱意绽放，约会的翩跹</div>
                        </div>
                    </router-link>
                    <VfxB class="vfx-box"></VfxB>
                    <div class="left-box" v-pre>
                        <img src="@/assets/images/agree/appointment.jpg" alt="not found">
                        <div class="content">
                            <p class="text">
                                在柔和的月光下，两颗心灵相遇，仿佛宇宙间只剩下彼此的存在。约会，是那一场美丽的邂逅，是爱意绽放的时刻，是浪漫与激情的交织。
                            </p>
                            <p class="text">
                                当时钟指向约定的时刻，他们在相约的地点相遇。她优雅地走来，如一朵盛开的花朵，洋溢着自信和魅力。他眼中闪烁着兴奋的光芒，怦然心动地注视着她的美丽。他们交换着温暖的微笑，仿佛世界为他们而停驻。
                            </p>
                            <p class="text">
                                他们选择了一座宁静的咖啡馆，暖黄色的灯光映衬出浪漫的氛围。坐在舒适的座位上，他们聆听着彼此的心跳声。他们的对话如流水般流淌，每个字都是相互吸引的磁场。他们分享着彼此的梦想、喜好和故事，每个瞬间都让彼此更加了解。
                            </p>
                            <p class="text">
                                窗外的风轻轻吹拂着他们的脸庞，仿佛是爱神的轻抚。他们决定漫步在月光下的街道上，手牵手，相互依偎。无言的默契在他们之间流转，他们感受着对方的存在，彷佛是彼此心灵的镜像。
                            </p>
                            <p class="text">
                                这段约会是如此神往，如此长存，仿佛他们置身于童话中的世界。他们相信，这个特殊的约会只是他们故事的开始，他们的爱情将继续绽放，直至永恒！
                            </p>
                        </div>
                    </div>
                    <div class="right-box">
                        <div class="vfx">
                            <VfxC :info="infos[0]"></VfxC>
                        </div>
                        <div class="list-box">
                            <div class="list-title">最新约会</div>
                            <div class="item side-card" v-for="item in appointmentList"
                                 :style="cover(item.cover)">
                                <router-link :to="`/special/${item.id}`" @click="app.specialFlag = 1">
                                    <div class="title">{{ item.title }}</div>
                                    <div class="time">
                                        开始时间：{{ item.timeStart }}
                                        <span style="margin: 0 0.7rem"></span>
                                        结束时间:{{ item.timeEnd }}
                                    </div>
                                </router-link>
                            </div>
                        </div>
                    </div>
                </div>
            </n-carousel-item>
            <n-carousel-item :style="{ width: '80%' }">
                <div class="side-card glass">
                    <router-link to="special" @click="app.specialFlag = 2">
                        <div class="but open-ent">
                            <div class="prompt">点击进入活动专栏</div>
                            <div class="theme">《活动》 - 星光闪耀，我荡漾其中</div>
                        </div>
                    </router-link>
                    <VfxA class="vfx-box" width="1rem" height="1rem"></VfxA>
                    <div class="left-box" v-pre>
                        <img src="@/assets/images/agree/activity.jpg" alt="not found">
                        <div class="content">
                            <p class="text">
                                迎来了期盼已久的日子，活动的热潮即将掀起。它是一场狂欢的盛宴，是梦想与热情的交汇，是生命在舞动中绽放的璀璨。
                            </p>
                            <p class="text">
                                当灯光照亮夜空，音乐的节奏渐渐响起，人群中蓬勃着一种无法言喻的激动。每个人都被活动的魔力吸引，跳动着与音乐同频的心跳，迸发出无尽的活力。
                            </p>
                            <p class="text">
                                身穿华丽的服饰，犹如星辰般闪耀。彩色的灯光在空中舞动，照亮了每个人的脸庞，使他们成为了活动的主角。熟悉的歌曲响起，人们投入其中，尽情地舞动着，释放内心深处的热情。
                            </p>
                            <p class="text">
                                活动的氛围中弥漫着团结和友爱的气息，人们相互搀扶着，分享着这份特殊的喜悦。他们互相鼓励，一同欢呼，成为一个欢乐的大家庭。在这个时刻，所有的界限和差异都被消除，只剩下一片充满爱的团结。
                            </p>
                            <p class="text">
                                在这个特别的活动中，我们一同成长，一同燃烧，追逐着梦想的光芒。活动将成为我们美好回忆的一部分，激励着我们在生命的舞台上继续奋斗，创造出更多令人心动的瞬间。
                            </p>
                        </div>
                    </div>
                    <div class="right-box">
                        <div class="vfx">
                            <VfxC :info="infos[1]"></VfxC>
                        </div>
                        <div class="list-box">
                            <div class="list-title">最新活动</div>
                            <div class="item side-card" v-for="item in activityList"
                                 :style="cover(item.cover)">
                                <router-link :to="`/special/${item.id}`" @click="app.specialFlag = 2">
                                    <div class="title">{{ item.title }}</div>
                                    <div class="time">
                                        开始时间：{{ item.timeStart }}
                                        <span style="margin: 0 0.7rem"></span>
                                        结束时间:{{ item.timeEnd }}
                                    </div>
                                </router-link>
                            </div>
                        </div>
                    </div>
                </div>
            </n-carousel-item>
            <n-carousel-item :style="{ width: '80%' }">
                <div class="side-card glass">
                    <router-link to="special" @click="app.specialFlag = 3">
                        <div class="but open-ent">
                            <div class="prompt">点击进入赛事专栏</div>
                            <div class="theme">《赛事》 - 激情与荣耀交融</div>
                        </div>
                    </router-link>
                    <VfxD class="vfx-box"></VfxD>
                    <div class="left-box" v-pre>
                        <img src="@/assets/images/agree/competition.jpg" alt="not found">
                        <div class="content">
                            <p class="text">
                                激情燃烧的时刻终于来临，篮球场上的战鼓隆隆，呐喊声此起彼伏。这是一场关乎荣誉和奋斗的篮球盛宴，汇聚了无数热爱篮球的心灵，让人沉浸在生动而煽情的竞技世界中。
                            </p>
                            <p class="text">
                                球场上，运动员们身披战袍，汗水和激情交织成绚烂的画卷。每个人都奋力拼搏，展现出卓越的技巧和无限的才华。球在空中翩然飞舞，如音符般跳跃，伴随着呼啸的风声，每一次传递都是默契与信任的体现。
                            </p>
                            <p class="text">
                                观众们沉浸在比赛的氛围中，他们站立在观赛席上，情绪高昂地为自己支持的队伍欢呼助威。他们的眼神充满热忱，双手不停地拍击，激情如火山喷涌而出。他们与球员们一同感受到比赛的激烈，心跳与喝彩交织在一起。
                            </p>
                            <p class="text">
                                每个篮球的飞过，都伴随着希望和梦想的叩击。每个进球都是胜利的喜悦，让人沉醉其中，让球员们超越极限，追逐自己的篮球梦。
                            </p>
                            <p class="text">
                                篮球场上的每一个瞬间都让我们感受到运动的力量，让我们相信，篮球赛是一场关于梦想的华丽舞台，每个人都是主角，每个动作都是一曲壮美的乐章。
                            </p>
                        </div>
                    </div>
                    <div class="right-box">
                        <div class="vfx">
                            <VfxC :info="infos[2]"></VfxC>
                        </div>
                        <div class="list-box">
                            <div class="list-title">最新赛事</div>
                            <div class="item side-card" v-for="item in competitionList"
                                 :style="cover(item.cover)">
                                <router-link :to="`/special/${item.id}`" @click="app.specialFlag = 3">
                                    <div class="title">{{ item.title }}</div>
                                    <div class="time">
                                        开始时间：{{ item.timeStart }}
                                        <span style="margin: 0 0.7rem"></span>
                                        结束时间:{{ item.timeEnd }}
                                    </div>
                                </router-link>
                            </div>
                        </div>
                    </div>
                </div>
            </n-carousel-item>
            <n-carousel-item :style="{ width: '80%' }">
                <div class="side-card glass">
                    <router-link to="special" @click="app.specialFlag = 4">
                        <div class="but open-ent">
                            <div class="prompt">点击进入帮助专栏</div>
                            <div class="theme">《帮助》 - 赠人玫瑰，手有余香</div>
                        </div>
                    </router-link>
                    <VfxB class="vfx-box"></VfxB>
                    <div class="left-box" v-pre>
                        <img src="@/assets/images/agree/help.jpg" alt="not found">
                        <div class="content">
                            <p class="text">
                                在生命的旅途中，我们时常需要一双温暖而有力的手，给予我们支持和帮助。帮助是一种美妙而伟大的行为，它能点燃希望的火花，抚平疲惫的心灵。
                            </p>
                            <p class="text">
                                当困境笼罩心头，帮助的力量仿佛是一束明亮的阳光，穿透黑暗，照亮前行的道路。它是无私的给予，是真挚的关怀，是一双坚定的手臂，守护着我们迈向更好的明天。
                            </p>
                            <p class="text">
                                帮助不仅仅是给予物质上的支持，更是关怀和理解的表达。它是一种分享，是与他人共同承担困难和挑战的勇气。帮助能够温暖他人的心房，让他们感受到关爱和安慰，重新找回人生的方向。
                            </p>
                            <p class="text">
                                帮助不仅让受助者感到幸福和感激，也让施助者内心充满了喜悦和满足，彼此的联系在无形中更加紧密。
                            </p>
                            <p class="text">
                                当我们伸出援助之手，给予他人帮助时，我们不仅在改变他人的生活，也在塑造着自己的人格。帮助让我们变得更加宽容和慈善，让我们成为一个更好的人，以充满爱心的姿态面对世界。
                            </p>
                        </div>
                    </div>
                    <div class="right-box">
                        <div class="vfx">
                            <VfxC :info="infos[3]"></VfxC>
                        </div>
                        <div class="list-box">
                            <div class="list-title">最新求助</div>
                            <div class="item side-card" v-for="item in helpList"
                                 :style="cover(item.cover)">
                                <router-link :to="`/special/${item.id}`" @click="app.specialFlag = 4">
                                    <div class="title">{{ item.title }}</div>
                                    <div class="time">
                                        开始时间：{{ item.timeStart }}
                                        <span style="margin: 0 0.7rem"></span>
                                        结束时间:{{ item.timeEnd }}
                                    </div>
                                </router-link>
                            </div>
                        </div>
                    </div>
                </div>
            </n-carousel-item>
        </n-carousel>
    </div>
</template>

<script setup lang="ts">
import {getAgreementList} from "@/api/agreement";
import {Agreement, AgreementQuery} from "@/api/agreement/types";
import useStore from "@/store";

const appointmentList = ref([] as Agreement[]);
const activityList = ref([] as Agreement[]);
const competitionList = ref([] as Agreement[]);
const helpList = ref([] as Agreement[]);

const {app} = useStore();

const data = reactive({
    isShowVfx: true,
    query: {
        pageNum: 1,
        pageSize: 10,
        type: 1,
    } as AgreementQuery,
    infos: [
        {
            top: "约会",
            i1: "忠贞爱情",
            i2: "永恒交织",
            i3: "为爱而生",
            i4: "至死不渝",
        },
        {
            top: "活动",
            i1: "欢聚一堂",
            i2: "刺激有趣",
            i3: "丰富多彩",
            i4: "激动人心",
        },
        {
            top: "赛事",
            i1: "激情四溢",
            i2: "精英争霸",
            i3: "顶尖竞技",
            i4: "众星云集",
        },
        {
            top: "帮助",
            i1: "伸出援手",
            i2: "关爱温暖",
            i3: "协力同心",
            i4: "携手前行",
        }
    ]
})

const {isShowVfx, query, infos} = toRefs(data);

const cover = computed(() => (cover: string) => 'background:url(' + cover + ')');
const getAgreeList = () => {
    getAgreementList(query.value).then(({data}) => {
        appointmentList.value = data.rows;
    });
    query.value.type = 2;
    getAgreementList(query.value).then(({data}) => {
        activityList.value = data.rows;
    });
    query.value.type = 3;
    getAgreementList(query.value).then(({data}) => {
        competitionList.value = data.rows;
    });
    query.value.type = 4;
    getAgreementList(query.value).then(({data}) => {
        helpList.value = data.rows;
    });
}

onMounted(() => {
    getAgreeList();
})

</script>

<style scoped lang="scss">
::-webkit-scrollbar {
  width: 0;
}

.entrance {
  width: 100%;
  height: 12rem;

  .side-card {
    position: relative;
    width: calc(100% - 0.2rem);
    height: calc(100% - 0.2rem);
    margin: 0.1rem auto;
    display: flex;
    overflow: hidden;

    .open-ent {
      position: absolute;
      top: 0;
      left: calc(50% - 3.5rem);
      width: 7rem;
      border-radius: 0 0 0.1rem 0.1rem;
      height: 1.3rem;
      transform: translateY(-0.65rem);
      transition: 0.3s ease-in-out;
      z-index: 1;
      color: var(--main-1);
      background: var(--main-2-hs2);

      .prompt {
        position: absolute;
        top: 0;
        width: 100%;
        margin: 0 auto;
      }

      .theme {
        position: absolute;
        bottom: 0;
        width: 100%;
        margin: 0 auto;
      }

      &:hover {
        cursor: pointer;
        background: var(--main-2-hs3);
        transform: none;
      }
    }

    .vfx-box {
      position: absolute;
      top: 2.3rem;
      left: calc(24% - 0.5rem);
    }

    .left-box {
      width: 50%;
      height: calc(100% - 1rem);
      padding-right: 0.3rem;

      img {
        width: 100%;
        height: 4rem;
        background-size: cover;
        background-position: center !important;
        margin: 0.6rem auto 0.3rem;
        border-radius: 0.2rem;
        box-shadow: 0 0 0.06rem 0.03rem var(--box-shadow);
      }

      .content {
        width: 100%;
        height: 6.5rem;
        overflow-y: auto;
      }
    }

    .right-box {
      position: relative;
      width: 50%;
      height: 96%;
      margin-top: 0.6rem;
      overflow: hidden;

      .vfx {
        width: 100%;
        height: 3rem;
        margin: 0.6rem auto 0;
      }

      .list-box {
        position: relative;
        width: 100%;
        height: calc(100% - 3rem);
        display: flex;
        flex-wrap: wrap;
        gap: 0.2rem;
        padding: 1rem 0;
        margin-top: -0.4rem;
        overflow-y: auto;

        .list-title {
          position: absolute;
          top: 0.2rem;
          width: 100%;
          text-align: center;
          font-size: 0.4rem;
          color: var(--main-1);
          font-weight: bold;
          box-shadow: 0 0 0.1rem 0.03rem var(--box-shadow);
          z-index: 1;
        }

        .item {
          width: 4.8rem;
          height: 2rem;
          background-position: center !important;
          background-size: cover !important;
          cursor: url(@/assets/cursor/link.cur), auto !important;
          overflow: hidden;

          .time {
            position: absolute;
            bottom: 0.1rem;
            left: 0.3rem;
            height: 0.4rem;
            white-space: nowrap;
            background: var(--box-shadow);
            box-shadow: 0 0 0.06rem 0.03rem var(--box-shadow);
            border-radius: 0.1rem;
            padding: 0 0.1rem;
            transition: 0.5s ease-in-out;

            &:hover {
              transform: translateX(-5rem);
            }
          }
        }
      }
    }
  }
}
</style>